import { Module, Mutation } from 'vuex';
import { v4 as uuidv4 } from 'uuid';
import { GlobalDataProps } from './index';
import { AllComponentProps,  } from 'lego-bricks'
import {TextComponentProps} from '../defaultProps'

/**
 *  画布编辑器所有组件数据
 */
export interface EditorProps {
  // 供中间编辑器渲染的数组
  components: ComponentData[];
  // 当前编辑的是哪个元素，uuid
  currentElement: string;
}

/**
 * 单个画布组件
 */
export interface ComponentData {
  // 这个元素的 属性，属性请详见下面
  props: Partial<AllComponentProps>;
  // id，uuid v4 生成
  id: string;
  // 业务组件库名称 l-text，l-image 等等
  name: 'l-text' | 'l-image' | 'l-shape';
  // 图层是否隐藏
  isHidden?: boolean;
  // 图层是否锁定
  isLocked?: boolean;
  // 图层名称
  layerName?: string;
}
export interface PageProps {
  backgroundColor: string;
  backgroundImage: string;
  backgroundRepeat: string;
  backgroundSize: string;
  height: string;
}
export type AllFormProps = PageProps & AllComponentProps

// 测试数据
export const testComponents: ComponentData[] = [
  {
    id: uuidv4(),
    name: 'l-text',
    layerName: '图层3',
    props: {
      text: 'hello3',
      fontSize: '15px',
      actionType: 'url',
      // url: 'https://www.baidu.com',
      lineHeight: '3',
      textAlign: 'left',
      fontFamily: '',
      color:'red'
    }
  },
 
];
const editor: Module<EditorProps, GlobalDataProps> = {
  state: {
    components: testComponents,
    // 画布选中的元素
    currentElement: ''
  },
  mutations: {
    /**
     * 画布添加组件
     * @param state 当前state
     * @param component 组件
     */
    addComponent(state, component: ComponentData) {
      console.log('addComponent', component);
      const newComponent: ComponentData = {
        id: uuidv4(),
        name: 'l-text',
        props: component.props
      }
      state.components.push(newComponent);
      console.log('addComponent', state.components);
    },
    /**
     * 画布修改选中组件
     * @param state 当前state
     * @param currentId 当前选中组件id
     */
    setActive(state, currentId: string) {
      state.currentElement = currentId
    },
   /**
    * 修改当前组件属性
    * @param state 当前state
    * @param param1 组件属性
    */
    updateComponent(state,param1){
      const {key,value,id} = param1
      const updatedComponent = state.components.find((component) => component.id === (id || state.currentElement))
      console.log('handleChange11',value, param1,updatedComponent);
      if(updatedComponent){
        updatedComponent.props[key as keyof TextComponentProps] = value
      }
    }
  },
  actions: {},
  getters: {
    // 画布获取当前选中的组件
    getCurrentElement: (state) => {
      return state.components.find((component) => component.id === state.currentElement)
    },
  }
};
export default editor;
